(function ($) {
    "use strict"; //JavaScript 严格模式
    var dataArr = [];

    function dataFn() {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: "js/pcas-code.json",
                type: "GET",
                async: false,
                success(res) {
                    resolve(res);
                },
            })
        })
    }
    dataFn().then(res => {
        dataArr = res
    })

    function cityPlug(el, option) {
        var that = this;
        console.log("0000");
        console.log(el);
        console.log(option)
        this.el = el;
        this.option = option;

        this.dataArr = that.option.dataArr;
        this.key = that.option.key;
        this.children = that.option.children;
        this.linkage = that.option.linkage;

        this.choiceProvince = ""; //一级选择value值
        this.choiceCity = ""; //二级选择value值
        this.choiceRegion = ""; //三级选择value值
        this.choiceStreets = ""; //四级选择value值

        this.provinceId = ""; //一级数据数组索引
        this.cityId = ""; //二级数据数组索引
        this.regionId = ""; //三级数据数组索引

        this.cityArr = ""; //二级数组
        this.areaArr = ""; //三级数组
        this.regionArr = ""; //四级数组

        this.init();
        // 点击遮罩层点击事件
        $("body").off("click", ".dispickerPlug-masking").on("click", ".dispickerPlug-masking", function (e) {
            that.close();
            e.stopPropagation();
        })
        // menu点击
        $("body").off("click", ".dispickerPlug-menu-area").on("click", ".dispickerPlug-menu-area", function (e) {
            var index = $(this).index();
            $(this).addClass("dispickerPlug-menu-area-active");
            $(this).siblings().removeClass("dispickerPlug-menu-area-active");
            $(".dispickerPlug-group").eq(index).show();
            $(".dispickerPlug-group").eq(index).siblings().hide();
            e.stopPropagation();
        })
        // 第一级点击
        $("body").off("click", ".province-area").on("click", ".province-area", function (e) {
            that.choiceProvince = $(this).attr("data-val");
            console.log(that.choiceProvince)
            that.city();
            e.stopPropagation();
        })
        // 第二级点击
        $("body").off("click", ".city-area").on("click", ".city-area", function (e) {
            that.choiceCity = $(this).attr("data-val");
            if (that.linkage <= 4) {
                that.region();
            }
            // $(".dispickerPlug-menu-area").eq(1).addClass("dispickerPlug-menu-area-active").text(that.choiceCity);
            // $(".dispickerPlug-menu-area").eq(1).siblings().removeClass("dispickerPlug-menu-area-active")
            e.stopPropagation();
        });
        // 第三级点击
        $("body").off("click", ".region-area").on("click", ".region-area", function (e) {
            that.choiceRegion = $(this).attr("data-val");
            if (that.linkage <= 4) {
                that.streets();
            }
            // $(".dispickerPlug-menu-area").eq(2).addClass("dispickerPlug-menu-area-active").text(that.choiceRegion);
            // $(".dispickerPlug-menu-area").eq(2).siblings().removeClass("dispickerPlug-menu-area-active")

            e.stopPropagation();
        });
        // 第四级点击
        $("body").off("click", ".streets-area").on("click", ".streets-area", function (e) {
            that.choiceStreets = $(this).attr("data-val");
            $(".dispickerPlug-menu-area").eq(3).addClass("dispickerPlug-menu-area-active").text(that.choiceStreets)
            $(".dispickerPlug-menu-area").eq(3).siblings().removeClass("dispickerPlug-menu-area-active")
            e.stopPropagation();
        })
        // 取消按钮事件
        $("body").off("click", ".dispickerPlug-cancel").on("click", ".dispickerPlug-cancel", function (e) {
            that.close();
            if (typeof that.option.cancel == "function") {
                return that.option.cancel(this.el)
            }
            e.stopPropagation();
        })
        // 确认按钮事件
        $("body").off("click", ".dispickerPlug-confirm").on("click", ".dispickerPlug-confirm", function (e) {
            var str = {}
            $(".dispickerPlug-menu-area").each(function () {
                var index = $(this).index()
                str[`return${index}`] = $(this).text()
            })
            that.close();
            e.stopPropagation();
            if (typeof that.option.confirm == "function") {
                return that.option.confirm(str, that.el)
            }
            // console.log(str)

        })
    }
    cityPlug.prototype = {
        init(params) {
            var that = this;
            that.created();
            that.province()
        },
        edit() {

        },
        province() {
            var that = this;
            console.log(that.dataArr)
            for (var i = 0; i < that.dataArr.length; i++) {
                $(".dispickerPlug0").append(`<div class="dispickerPlug-area province-area" data-val="${that.dataArr[i][that.key]}">${that.dataArr[i][that.key]}</div>`)
            }
        },
        city() {
            var that = this;
            that.provinceId = dataArr.findIndex(item => item[that.key] === that.choiceProvince);
            that.cityArr = dataArr[that.provinceId][that.children]; //二级数据
            // console.log(cityArr)
            $(".dispickerPlug0").hide(); //一级显示区域隐藏
            $(".dispickerPlug1").show(); //二级显示区域显示
            $(".dispickerPlug1").html(""); //二级数据清空
            for (var i = 0; i < that.cityArr.length; i++) {
                $(".dispickerPlug1").append(`<div class="dispickerPlug-area city-area" data-val="${that.cityArr[i][that.key]}">${that.cityArr[i][that.key]}</div>`)
            }
            // menu显示
            $(".dispickerPlug-menu").css({
                "display": "flex"
            })
            $(".dispickerPlug-menu-area").eq(0).show().text(that.choiceProvince).removeClass("dispickerPlug-menu-area-active");
            $(".dispickerPlug-menu-area").eq(1).show().text("请选择").addClass("dispickerPlug-menu-area-active");;
            $(".dispickerPlug-menu-area").eq(1).nextAll().hide();

        },
        region() {
            var that = this;
            that.cityId = that.cityArr.findIndex(item => item[that.key] === that.choiceCity);
            that.areaArr = that.cityArr[that.cityId][that.children];
            // console.log(areaArr)
            $(".dispickerPlug1").hide(); //二级显示区域隐藏
            $(".dispickerPlug2").show(); //三级显示区域显示
            $(".dispickerPlug2").html(""); //三级数据清空
            for (var i = 0; i < that.areaArr.length; i++) {
                $(".dispickerPlug2").append(`<div class="dispickerPlug-area region-area" data-val="${that.areaArr[i][that.key]}">${that.areaArr[i][that.key]}</div>`)
            }

            $(".dispickerPlug-menu-area").eq(1).removeClass("dispickerPlug-menu-area-active").text(that.choiceCity)
            $(".dispickerPlug-menu-area").eq(2).show().addClass("dispickerPlug-menu-area-active").text("请选择");
            $(".dispickerPlug-menu-area").eq(2).next().hide();
        },
        streets() {
            var that = this;
            that.regionId = that.areaArr.findIndex(item => item[that.key] === that.choiceRegion);
            that.regionArr = that.areaArr[that.regionId][that.children];
            $(".dispickerPlug2").hide(); //三级显示区域隐藏
            $(".dispickerPlug3").show(); //四级显示区域显示
            $(".dispickerPlug3").html(""); //四级内容清空
            for (var i = 0; i < that.regionArr.length; i++) {
                $(".dispickerPlug3").append(`<div class="dispickerPlug-area streets-area" data-val="${that.regionArr[i][that.key]}">${that.regionArr[i][that.key]}</div>`)
            }

            $(".dispickerPlug-menu-area").eq(2).removeClass("dispickerPlug-menu-area-active").text(that.choiceRegion)
            $(".dispickerPlug-menu-area").eq(3).show().addClass("dispickerPlug-menu-area-active").text("请选择");
            $(".dispickerPlug-menu-area").eq(3).next().hide()
        },
        created() {
            var that = this;
            var dataArr = that.option.dataArr;
            var key = that.option.key;
            var children = that.option.children;
            var linkage = that.option.linkage;
            var province = that.option.province;
            var cities = that.option.cities;
            var areas = that.option.areas;
            var streets = that.option.streets;
            // 遮罩层
            $("body").append(`<div class="dispickerPlug-masking"></div>`);
            $("body").append(`<div class="dispickerPlug-box">
                                <div class="dispickerPlug-head">
                                    <div class="dispickerPlug-btn">
                                        <div class="dispickerPlug-cancel">取消</div>
                                        <div class="dispickerPlug-confirm">确定</div>
                                    </div>
                                    <div class="dispickerPlug-menu">
                                        
                                    </div>
                                </div>
                                <div class="dispickerPlug-main">
                                    
                                </div>
                            </div>`);

            // <div class="dispickerPlug-group dispickerPlug-province" style="display: block;"></div>
            //         <div class="dispickerPlug-group dispickerPlug-city"></div>
            //         <div class="dispickerPlug-group dispickerPlug-region"></div>
            //         <div class="dispickerPlug-group dispickerPlug-streets"></div>

            for (var m = 0; m < linkage; m++) {
                $(".dispickerPlug-menu").append(`<div class="dispickerPlug-menu-area" data-return${m}="" style="width: calc(100% / ${linkage})"></div>`);
                console.log(m)
                if (m == 0) {
                    $(".dispickerPlug-main").append(`<div class="dispickerPlug-group dispickerPlug${m}" style="display: block;"></div>`)
                } else {
                    $(".dispickerPlug-main").append(`<div class="dispickerPlug-group dispickerPlug${m}"></div>`)
                }

            }


            if (province != "") {
                $(".dispickerPlug-menu").css({
                    "display": "flex"
                });
                $(".dispickerPlug-menu-area").eq(0).text(province).addClass("dispickerPlug-menu-area-active");
                $(".dispickerPlug-menu-area").eq(0).siblings().removeClass("dispickerPlug-menu-area-active");
                $(".dispickerPlug0").show();
                $(".dispickerPlug0").siblings().hide();
                that.choiceProvince = province;
            }
            if (that.linkage <= 4) {
                if (cities != "") {
                    that.city();
                    that.choiceCity = cities;

                    $(".dispickerPlug-menu-area").eq(1).text(cities).addClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug-menu-area").eq(1).siblings().removeClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug1").show();
                    $(".dispickerPlug1").siblings().hide();
                }
            }
            if (that.linkage <= 4) {
                if (areas != "") {
                    that.region();
                    that.choiceRegion = areas
                    $(".dispickerPlug-menu-area").eq(2).text(areas).addClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug-menu-area").eq(2).siblings().removeClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug2").show();
                    $(".dispickerPlug2").siblings().hide();
                }
            }

            if (that.linkage == 4) {
                if (streets != "") {
                    that.streets();
                    $(".dispickerPlug-menu-area").eq(3).text(streets).addClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug-menu-area").eq(3).siblings().removeClass("dispickerPlug-menu-area-active");
                    $(".dispickerPlug3").show();
                    $(".dispickerPlug3").siblings().hide();
                }
            }





            $(".dispickerPlug-masking").show();
            $(".dispickerPlug-box").animate({
                "bottom": "0px"
            }, 300)
        },
        close() {
            $(".dispickerPlug-masking").remove();
            $(".dispickerPlug-box").animate({
                "bottom": "-1000px"
            }, 300, function () {
                $(".dispickerPlug-box").remove()
            })
        }
    }
    $.fn.dispickerInit = function (options) {
        var defaults = {
            dataArr: dataArr,
            province: $(this).attr("data-one") == undefined ? "" : $(this).attr("data-one"), //省份
            cities: $(this).attr("data-two") == undefined ? "" : $(this).attr("data-two"), //城市
            areas: $(this).attr("data-three") == undefined ? "" : $(this).attr("data-three"), //区域
            streets: $(this).attr("data-four") == undefined ? "" : $(this).attr("data-four"), //街道
            key: "name", //key 默认字段
            children: "children", //子集默认字段
            linkage: 3, //联动级数(默认三级联动 省 市 区)
            confirm: function () {}
        }
        var options = $.extend(defaults, options); //继承默认参数
        var $this = $(this); //当然响应事件对象
        console.log(options)
        //绑定事件
        $this.on("click", function (e) {
            new cityPlug(this, options);
        });
    }
})(jQuery);